<template>
<view class="category">
  <UgoSearch></UgoSearch>
  <view class="main">
    <view class="menus">
      <view :class="['menu-item', current===index?'active':'']" @click="handleMenuSelect(index)" v-for="(item,index) in menus" :key="item">{{item}}</view>
    </view>
    <view class="content">
      <view class="goods-group" v-for="item1 in goods" :key="item1.cat_id">
        <view class="goods-group-title">{{item1.cat_name}}</view>
        <view class="goods-group-content">
          <navigator v-for="item2 in item1.children" :key="item2.cat_id" :url="'/pages/goods_list/goods_list?cid='+item2.cat_id">
            <u-image width="120rpx" height="120rpx" :src="item2.cat_icon"></u-image>
            <view class="cat-name">{{item2.cat_name}}</view>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
export default {
  data(){
    return{
      // 因为数据渲染较慢，主要原因是写在data违反了小程序规则，应该把categories当成一个普通的全局变量即可
      // categories:[],//商品分类数组
      current:0,//左侧标题选中的索引
      menus:[],//左侧标题数组
      goods:[],//右侧商品数组
    }
  },
  onLoad(){
    // categories变量没有在data中声明过 所以就是一个普通的全局变量 挂载this上变量即可
    this.categories=[];//商品分类数组
    // 商品分类数据--异步！！要等待一段时间 数据才会回来
    this.getCategories();
  },
  // computed:{
    // 左侧标题数组
  //   menus(){
  //     return this.categories.map((item)=>item.cat_name)
  //   },
  // 右侧商品数组
  //   goods(){
  //     if(!this.categories.length) return []
  //     return this.categories[this.current].children
  //   }
  // },
  methods:{
    // 获取商品分类数据
    async getCategories(){
      this.categories=await this.$u.http.get("/categories")
      this.menus=this.categories.map((item)=>item.cat_name)
      this.goods=this.categories[this.current].children
    },
    // 左侧标题的点击事件
    handleMenuSelect(current){
      this.current=current
      this.goods=this.categories[this.current].children
    }
  }
}
</script>

<style lang="scss" scoped>
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
    overflow: hidden;
    display: flex;
    .menus {
      width: 182rpx;
      overflow: auto;
      .menu-item {
        text-align: center;
        height: 74rpx;
        line-height: 74rpx;
        color: #666;
      }
      /* 选中的样式 */
      .active {
        color: $themeColor;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4rpx;
          height: 70%;
          background-color: $themeColor;
        }
      }
    }
    .content {
      flex: 1;
      overflow: auto;
      .goods-group {
        .goods-group-title {
          height: 74rpx;
          text-align: center;
          line-height: 74rpx;

          &::before,
          &::after {
            content: "/";
            margin: 0 10rpx;
            color: #ccc;
          }
        }

        .goods-group-content {
          display: flex;
          flex-wrap: wrap;
          navigator {
            width: 33.33%;

            display: flex;
            flex-direction: column;
            // 侧轴
            align-items: center;

            
          }
        }
      }
    }
  }
}
</style>